﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="iWriteJavascript._Default" %>
<%@ Register TagPrefix="js" Namespace="Developmentalmadness.Web.UI.ExtJsControlLibrary" Assembly="Developmentalmadness.Web.UI.ExtJsControlLibrary" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <!-- master styles -->
    <script type="text/javascript">
    <!--
        function alertCollapse(p, animate){
            Ext.Msg.show({
               title:'Collapse fired',
               msg: 'You are collapsing a panel. Would you like to continue?',
               buttons: Ext.Msg.YESNOCANCEL,
               icon: Ext.MessageBox.QUESTION
            });
        }
    -->
    </script>
</head>
<body>
    <form id="form1" runat="server">
    
       <asp:ScriptManager ID="ScriptManager1" runat="server" />
       
       <js:ExtJsPanel runat="server" ID="myPanel" title="my panel" renderTo="myPanel" width="30em" collapsible="true">
            <ClientEvents>
                <js:ClientEvent name="collapse" action="alertCollapse" />
            </ClientEvents>
            <Body>
                <js:ExtJsToolbar ID="myToolbar" width="10em" autoHeight="true" renderTo="myToolbar" runat="server">
                    <items>
                        <js:ExtJsButton ID="myButton" runat="server" text="A Menu Button" >
                            <menu ID="buttonMenu1" runat="server">
                                <items>
                                    <js:ExtJsMenuTextItem ID="txt3" runat="server" text="Text 3" />
                                    <js:ExtJsMenuSeparator ID="separator2" runat="server" />
                                    <js:ExtJsMenuTextItem ID="txt4" runat="server" text="Text 4" />
                                    <js:ExtJsDateMenu ID="date1" runat="server" text="Choose Date" />
                                    <js:ExtJsColorMenu ID="color2" runat="server" text="Choose Color" />                   
                                </items>
                            </menu>
                        </js:ExtJsButton>
                        <js:ExtJsSplitButton ID="split1" runat="server" text="A Split Button">
                            <menu ID="splitMenu1" runat="server">
                                <items>
                                    <js:ExtJsMenuTextItem ID="txt5" runat="server" text="Text 5" />
                                    <js:ExtJsColorMenu ID="color3" runat="server" text="Choose Color" />
                                </items>
                            </menu>
                        </js:ExtJsSplitButton>
                    </items>
                </js:ExtJsToolbar>
                
                Wassap!
            
                <js:ExtJsPanel runat="server" ID="mysubPanel" title="my sub panel" renderTo="mysubPanel"
                    width="10em" collapsible="true" html="my sub content">
                </js:ExtJsPanel>
            </Body>
       </js:ExtJsPanel>

    </form>
</body>
</html>
